<template>
  <div>
    <el-form-item label="进度条类型">
      <el-radio-group v-model="localData.percentageType">
        <el-radio-button label="直线" value="line" />
        <el-radio-button label="圆形" value="circle" />
        <el-radio-button label="仪表盘" value="dashboard" />
      </el-radio-group>
    </el-form-item>
    <el-form-item label="进度条宽度">
      <el-input-number v-model="localData.strokeWidth" :min="6" :max="50" style="width: 150px"></el-input-number>
    </el-form-item>
    <el-form-item label="是否展示文字">
      <el-switch v-model="localData.showText" />
    </el-form-item>
    <el-form-item label="文字是否内置" v-if="localData.showText && localData.percentageType === 'line'">
      <el-switch v-model="localData.textInside" />
    </el-form-item>
    <el-form-item label="当前状态">
      <el-radio-group v-model="localData.status">
        <el-radio-button label="成功" value="success" />
        <el-radio-button label="异常" value="exception" />
        <el-radio-button label="警告" value="warning" />
      </el-radio-group>
      <text-button text="取消" @click="localData.status = ''" style="margin: 10px 0 0 10px" />
    </el-form-item>
    <el-form-item label="是否展示动画" v-if="localData.percentageType === 'line'">
      <el-switch v-model="localData.indeterminate" />
    </el-form-item>
    <el-form-item label="是否展示条纹" v-if="localData.percentageType === 'line'">
      <el-switch v-model="localData.striped" />
    </el-form-item>
    <el-form-item label="速度(s/次)" v-if="localData.percentageType === 'line' && localData.indeterminate">
      <el-input-number v-model="localData.duration" :min="0" :max="10" style="width: 150px"></el-input-number>
    </el-form-item>
    <el-form-item label="条纹动画" v-if="localData.striped">
      <el-switch v-model="localData.stripedFlow" />
    </el-form-item>
    <el-form-item label="环形画布宽度" v-if="localData.percentageType !== 'line'">
      <el-input-number v-model="localData.width" :min="50" :max="1000" style="width: 150px"></el-input-number>
    </el-form-item>
    <el-form-item label="环形路径形状" v-if="localData.percentageType !== 'line'">
      <el-radio-group v-model="localData.strokeLinecap">
        <el-radio-button label="平头" value="butt" />
        <el-radio-button label="圆头" value="round" />
        <el-radio-button label="方头" value="square" />
      </el-radio-group>
    </el-form-item>
    <el-form-item label="进度条颜色">
      <el-select v-model="localData.color" clearable>
        <el-option v-for="opt in getPageFuncs()" :key="opt.funcName" :label="opt.funcLabel" :value="opt.funcName" />
      </el-select>
    </el-form-item>
    <el-form-item label="自定义文字">
      <el-select v-model="localData.format" clearable>
        <el-option v-for="opt in getPageFuncs()" :key="opt.funcName" :label="opt.funcLabel" :value="opt.funcName" />
      </el-select>
    </el-form-item>
  </div>
</template>

<script>
import TextButton from '@/components/Zmids/Buttons/TextButton.vue';

export default {
  name: 'ProgressConfig',
  components: { TextButton },
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    formJson: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      localData: {}
    }
  },
  watch: {
    data: {
      handler(newVal) {
        this.localData = newVal;
      },
      deep: true,
      immediate: true
    },
    localData: {
      handler(newVal) {
        if (newVal.percentageType !== 'line') {
          this.localData.textInside = false;
          this.localData.striped = false;
        }
        console.log('localData', this.localData);
        this.$emit('update:data', newVal);
      },
      deep: true
    }
  },
  methods: {
    getPageFuncs() {
      return this.formJson.funcs ?? [];
    },
  }
}
</script>